<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    text: String,
    showArrow: Boolean,
    icon: String,
    theme: { type: String, default: "black" }, // white
  },
});
</script>

<template>
  <view
    class="mini-btn"
    :style="{
      borderRadius: theme === 'black' ? '22rpx' : '',
      backgroundColor: theme === 'black' ? 'rgba(0, 0, 0, 0.7)' : '',
    }"
  >
    <image class="mini-btn-icon" v-if="icon" :src="icon" />
    <view
      class="mini-btn-text"
      :style="{
        color: theme === 'black' ? '#ffffff' : '',
      }"
    >
      {{ text }}
    </view>
    <template v-if="showArrow">
      <image
        class="mini-btn-arrow"
        v-if="theme === 'black'"
        src="@/package/guider/static/detail-arrow2.png"
      />
      <image
        class="mini-btn-arrow"
        v-else
        src="@/package/guider/static/detail-arrow.png"
      />
    </template>
  </view>
</template>

<style lang="scss">
.mini-btn {
  display: flex;
  align-items: center;
  height: 42rpx;
  padding: 0 12rpx;

  .mini-btn-icon {
    width: 24rpx;
    height: 20rpx;
    margin-right: 8rpx;
  }

  .mini-btn-text {
    font-size: 24rpx;
    color: #d5843b;
  }

  .mini-btn-arrow {
    width: 10rpx;
    height: 16rpx;
    margin-left: 8rpx;
  }
}
</style>